<template>
  <div class='upload-wrap'>
    <el-upload class="upload flex" list-type="picture-card" v-bind="$attrs" :file-list="fileList" :action="uploadFileUrl"
      :headers="headers" :before-upload="handleFileBefore" :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" :on-success="handleSuccess" :on-exceed="handleExceed">
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
import { get } from '@/utils/auth'
export default {
  props: {
    value: {
      required: true,
    },
    fileType: {
      type: Array,
      default: () => ['png', 'jpg', 'jpeg'],
    },
    formType: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + get('admin_token'),
      },
      dialogImageUrl: '',
      dialogVisible: false,
      // 上传文件列表
      uploadList: [],
      // 文件列表
      // fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      fileList: [],
      IsShowload: true
    };
  },
  watch: {
    value: {
      handler(val) {
        if (val !== undefined) {
          this.initFileList(val)
        }
      },
      immediate: true
    },
  },
  mounted() {
  },
  methods: {
    onError(err, file, fileList) {
      console.log(err, file, fileList, 'error')
    },
    handleFileBefore(file) {
      if (this.fileType) {
        const fileName = file.name.split('.')
        const fileExt = fileName[fileName.length - 1];
        if (this.fileType.indexOf(fileExt) === -1) {
          this.$message.warning('文件格式不正确')
          return false
        }
      }
    },
    handleRemove(file, fileList) {
      // this.fileList.splice(this.fileList.indexOf(file), 1)
      console.log(fileList, 'remove')
      this.fileList = fileList;
      this.$emit('change', this.fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.$emit('change', response.data.url)
      this.fileList = [{ name: file.name, url: this.$store.state.config.inFilePrefix + response.data.url }];
    },
    // 初始化图片列表
    initFileList(val) {
      if (this.formType !== 'basicInformation') {
      } else {
        console.log(val)
        if (val != null) {
          this.fileList = [{
            name: val,
            url: this.$store.state.config.inFilePrefix + val
          }]
        }else{
          this.fileList = []
        }
      }
      console.log(this.fileList, '初始化图片列表')
    },
    // 文件超出限制
    handleExceed() {
      this.$message.warning(`最多只能上传${this.$attrs.limit}个`)
    },
  }
}
</script>

<style lang='less' scoped></style>